<div class="profile-popup user-profile-popup">
    <div class="popup-header">
        <div class="user-profile-header">
            <div class="user-avatar" style="background-color: {{avatarColor}};">
                {{initials}}
            </div>
            <div class="user-info" style="width: calc(100% - 40px);">
                <div class="user-name"><secure-name></secure-name></div>
                <div class="user-email"><secure-email></secure-email></div>
                <iframe id="user-details-frame" class="user-details-iframe" style="display: none; padding: 0; border: none; background: transparent; width: 100%; height: auto; overflow: hidden;" scrolling="no"></iframe>
                <div class="user-plan-name {{planClass}}">{{planName}}</div>
                <a class="get-phoenix-pro-profile" href="{{getProLink}}" style="font-size: 13px;">
                    {{Strings.GET_PHOENIX_PRO}}
                    <i class="fa fa-arrow-right" style="font-size: 10px;margin-left: 4px;"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="popup-body">
        <div class="profile-section html-message forced-hidden">
        </div>
        <div class="profile-section quota-section forced-hidden">
            <div class="quota-header">
                <span class="titleText">{{titleText}}</span>
                <span class="usageText">{{usageText}}</span>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: {{usedPercent}}%;"></div>
            </div>
        </div>

        <button id="phoenix-account-btn" class="btn dialog-button menu-button">
            <i class="fa fa-user"></i>
            {{Strings.ACCOUNT_DETAILS}}
        </button>

        <button id="phoenix-signout-btn" class="btn dialog-button menu-button signout">
            <i class="fa fa-sign-out-alt"></i>
            {{Strings.SIGN_OUT}}
        </button>

        <div class="support-link">
            <button id="phoenix-support-btn" class="text-link">
                <i class="fa fa-question-circle"></i>
                {{Strings.CONTACT_SUPPORT}}
            </button>
        </div>
    </div>
</div>
